<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
          :checked-value="1"
          unchecked-value="2"
          @change="changeStatus($event, record.id)"
          :default-checked="record.status == 1"
        />
      </template>
      <!-- 操作前置扩展 -->
      <template #operationBeforeExtend="{ record }" v-if="! isRecovery">
        <a-link @click="openDoc(record)"><icon-book /> 文档</a-link>
        <a-link @click="bindApi(record.id)"><icon-pushpin /> 绑定</a-link>
      </template>
    </ma-crud>

    <bind ref="bindRef" />
  </div>
</template>

<script setup>
  import { ref, reactive, computed, nextTick } from 'vue'
  import app from '@/api/system/app'
  import { Message, Modal } from '@arco-design/web-vue'
  import Bind from './bind.vue'

  const crudRef = ref()
  const bindRef = ref()

  const openDoc = (row) => {
    window.open(
      window.location.origin + '/#/mineDoc?app_id=' + row.app_id + '&app_secret=' + row.app_secret
    )
  }

  const bindApi = (id) => {
    bindRef.value.open(id)
  }

  const changeStatus = async (status, id) => {
    const response = await app.changeStatus({ id, status })
    if (response.success) {
      Message.success(response.message)
    }
  }

  let isRecovery = computed(() => crudRef.value ? crudRef.value.isRecovery : false )

  const crud = reactive({
    api: app.getList,
    recycleApi: app.getRecycleList,
    showIndex: false,
    pageLayout: 'fixed',
    rowSelection: { showCheckedAll: true },
    operationColumn: true,
    operationColumnWidth: 270,
    add: { show: true, api: app.save, auth: ['system:app:save'] },
    edit: { show: true, api: app.update, auth: ['system:app:update'] },
    delete: {
      show: true,
      api: app.deletes, auth: ['system:app:delete'],
      realApi: app.realDeletes, realAuth: ['system:app:realDeletes']
    },
    recovery: { show: true, api: app.recoverys, auth: ['system:app:recovery']},
    formOption: {
      width: '850px',
      layout: [
        { formType: 'grid', cols:
          [
            { span: 12, formList: [ { dataIndex: 'group_id' }] },
            { span: 12, formList: [{ dataIndex: 'app_name' }] }
          ]
        },
        { formType: 'grid', cols: 
          [
            { span: 18, formList: [ { dataIndex: 'app_id' }] },
            { span: 5, offset: 1, formList: [{ dataIndex: 'app_id_button' }] }
          ]
        },
        { formType: 'grid', cols: 
          [
            { span: 18, formList: [ { dataIndex: 'app_secret' }] },
            { span: 5, offset: 1, formList: [{ dataIndex: 'app_secret_button' }] }
          ]
        },
      ]
    }
  })

  const columns = reactive([
    { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
    {
      title: '所属组', dataIndex: 'group_id', search: true, commonRules: [{ required: true, message: '所属组必选' }],
      formType: 'select', dict: { url: 'system/appGroup/list', props: { label: 'name', value: 'id' }, translation: true },
      labelWidth: '140px', width: 140 
    },
    {
      title: '应用名称', dataIndex: 'app_name', search: true, commonRules: [{ required: true, message: '应用名称必填' }],
      labelWidth: '120px', width: 150,
    },
    {
      title: 'APP ID', dataIndex: 'app_id', search: true, commonRules: [{ required: true, message: 'APP ID必填' }],
      labelWidth: '120px', disabled: true, width: 120,
      addDefaultValue: async () => {
        const res = await app.getAppId()
        return res.data.app_id
      }
    },
    {
      formType: 'button', dataIndex: 'app_id_button', hide: true,
      type: 'primary', title: '刷新APP ID', long: true,
      onClick: async () => {
        const form = crudRef.value.getFormData()
        if (crudRef.value.getCurrentAction() === 'edit') {
          Modal.info({
            simple: false,
            hideCancel: false,
            title: '提示',
            content: '此操作会造成已使用的应用验证失败，确定执行吗？',
            onOk: async () => {
              const res = await app.getAppId()
              form.app_id = res.data.app_id
            }
          })
          return
        }
        const res = await app.getAppId()
        form.app_id = res.data.app_id
      },
    },
    {
      title: 'APP SECRET', dataIndex: 'app_secret', commonRules: [{ required: true, message: 'APP SECRET必填' }],
      labelWidth: '120px', disabled: true, span: 19, width: 500,
      addDefaultValue: async () => {
        const res = await app.getAppSecret()
        return res.data.app_secret
      }
    },
    {
      formType: 'button', type: 'primary', title: '刷新APP SECRET', long: true,
      dataIndex: 'app_secret_button', hide: true,
      onClick: async () => {
        const form = crudRef.value.getFormData()
        if (crudRef.value.getCurrentAction() === 'edit') {
          Modal.info({
            simple: false,
            hideCancel: false,
            title: '提示',
            content: '此操作会造成已使用的应用验证失败，确定执行吗？',
            onOk: async () => {
              const res = await app.getAppSecret()
              form.app_secret = res.data.app_secret
            }
          })
          return
        }
        const res = await app.getAppSecret()
        form.app_secret = res.data.app_secret
      }
    },
    {
      title: '状态', dataIndex: 'status', search: true, formType: 'radio',
      dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
      addDefaultValue: '1', width: 80,
    },
    {
      title: '应用介绍', dataIndex: 'description', hide: true, formType: 'editor',
    },
    {
      title: '备注', dataIndex: 'remark', hide: true, formType: 'textarea',
    },
    {
      title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
      width: 180,
    },
  ])
</script>

<script>
export default { name: 'system:app' }
</script>

<style scoped>

</style>
